<template>
  <view class="tree-popup">
    <sar-popup
      :visible="computedVisible"
      :effect="effect"
    >
      <view class="tree-popup-container">
        <view class="tree-popup-header">
          <text class="tree-popup-title">{{ title }}</text>
        </view>
        <view class="tree-popup-content">
          <sar-tree
            ref="treeRef"
            :data="treeData" :node-keys="{ title: 'label', key: 'key' }"
            selectable
            root-style="margin-top: 30rpx"
          />
        </view>
        <view class="tree-popup-footer">
          <sar-button type="default" @click="handleCancel">取消</sar-button>
          <sar-button type="primary" @click="handleConfirm">确定</sar-button>
        </view>
      </view>
    </sar-popup>
  </view>
</template>

<script setup lang="ts">
import type { TreeExpose } from 'sard-uniapp'

interface Props {
  visible: boolean
  treeData: any[]
  title: string
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  treeData: () => [],
  title: '请选择',
})

const emit = defineEmits(['update:visible', 'confirm'])
const treeRef = ref<TreeExpose>()
const effect = ref('slide-bottom')
const computedVisible = computed({
  get: () => props.visible,
  set: (value) => {
    emit('update:visible', value)
  },
})

function handleCancel() {
  computedVisible.value = false
}

function handleConfirm() {
  const checkedKeys = getCheckedKeys()
  emit('confirm', checkedKeys)
  computedVisible.value = false
}

// 获取所有选中节点的key
function getCheckedKeys() {
  return treeRef.value?.getCheckedKeys()
}

// 获取所有半选中节点的key
function getHalfCheckedKeys() {
  return treeRef.value?.getHalfCheckedKeys()
}

// 设置指定节点为选中状态
function setCheckedKeys(keys: (string | number)[]) {
  treeRef.value?.setCheckedKeys(keys)
}

// 设置节点是否选中
function setChecked(key: string | number, checked: boolean) {
  treeRef.value?.setChecked(key, checked)
}

// 设置指定节点为展开状态
function setExpandedKeys(keys: (string | number)[]) {
  treeRef.value?.setExpandedKeys(keys)
}

// 设置节点是否展开
function setExpanded(key: string | number, expanded: boolean) {
  treeRef.value?.setExpanded(key, expanded)
}

// 切换节点展开状态
function toggleExpanded(key: string | number) {
  treeRef.value?.toggleExpanded(key)
}

// 添加根节点
function addRootNode() {
  treeRef.value?.addRootNode()
}

// 获取干净的当前树形数据
function getCleanTreeData() {
  return treeRef.value?.getCleanTreeData()
}

// 过滤树节点
function filter(searchString: string) {
  treeRef.value?.filter(searchString)
}

// 暴露组件使用方法
defineExpose({
  getCheckedKeys,
  getHalfCheckedKeys,
  setCheckedKeys,
  setChecked,
  setExpandedKeys,
  setExpanded,
  toggleExpanded,
  addRootNode,
  getCleanTreeData,
  filter,
})
</script>

<style lang="scss" scoped>
.tree-popup {
  .tree-popup-container {
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    overflow: hidden;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    width: 100vw;
    .tree-popup-header {
  padding: 20rpx 0;
  text-align: center;
  border-bottom: 1px solid #eee;
}

    .tree-popup-content {
      flex: 1;
      padding: 30rpx;
      overflow-y: auto;
      max-height: calc(70vh - 100rpx);
    }

    .tree-popup-footer {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 30rpx;
      border-top: 1px solid #eee;

      .sar-button {
        flex: 1;
        margin: 0 10rpx;

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
